<template>
  <div id="cas">
    <el-row :gutter="20" style="width: 50vw" type="flex" align="middle">
      <el-col :span="6" :offset="2">
        <el-dropdown @command="handleCommand">
      <span class="el-dropdown-link" style="color:#409eff">
        {{categorySelected}}<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="item in category" :command="item">{{item}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
      <el-col :span="4" :offset="6">
        <el-autocomplete
          class="inline-input"
          v-model="state"
          :fetch-suggestions="querySearch"
          placeholder="请输入搜索内容"
          @select="handleSelect"
        ></el-autocomplete>
      </el-col>
      <el-col :span="2" v-if="isAdmin">
        <el-button type="primary" @click="$emit('rowAdd')">新增</el-button>
      </el-col>


    </el-row>
  </div>
</template>

<script>
  export default {
    // Category And Search
    name: "CAS",
    data() {
      return {
        categorySelected: '选择分类',
        state: ''
      }
    },
    watch: {
      state: {
        handler() {
          if (this.state === '') {
            this.$emit('stateClear')
          }
        }
      }
    },
    props: {
      category: {
        type: Array,
        default() {
          return ['计算机类', '数学类', '文学类', '全部']
        }
      },
      books: {
        type: Array,
        default() {
          return  [
            { value: "ax", index: 1}]
        }
      },
      isAdmin: {
        default() {
          return false
        }
      }
    },
    methods: {
      handleCommand(command) {
        this.categorySelected = command
        this.$emit('categorySelect', command)
      },
      querySearch(queryString, cb) {
        let books = this.books;
        let results = queryString ? books.filter(this.createFilter(queryString)) : books;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (books) => {
          return (books.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      handleSelect(item) {
        this.$emit('bookSearch', item)
      }
    }
  }
</script>

<style scoped>

</style>
